<template>
    <div class="index-content">
      <div class="notice">
        <div class="notice_left">
          <img src="./../assets/images/icon.png" alt="" class="pic">
          <a href="">通知公告</a>
        </div>
        <div class="notice_right" v-if="viewModel.boardMsg">
          <a href="">{{viewModel.boardMsg?.context}}
          <span style="font-size:16px;color: #CCCCCC;">
          {{viewModel.boardMsg?.updateTime}}</span></a>

          <div class="more">
            <a href="">更多</a>
            <img src="./../assets/images/more.png" alt="">
          </div>
        </div>
        <div class="notice_right" v-else><a href="javascript:;">暂无数据</a></div>
      </div>
      <div class="news">
        <div class="news_left">
          <div class="news_leftdown">
            <a href="">习近平在中共中央政治局第三十九次...</a>
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
            <div class="five"></div>

          </div>
        </div>
        <div class="news_right">
          <div class="news_righttop">
            <ul>
              <li :class="{active: (viewModel.newSelect !== 'd-news')}" @click="() => { newList(2); viewModel.newSelect = '' }"><a href="javascript:;">时政新闻</a></li>
              <li :class="{active: (viewModel.newSelect === 'd-news')}" @click="() => { newList(1); viewModel.newSelect = 'd-news' }"><a href="javascript:;">东明党建</a></li>
            </ul>
          </div>
          <ul class="list">
            <li v-for="item in viewModel.newsList" :key="item.id"><a href=""><span style="font-size: 18px; color: #999999;">{{item.updateTime}}</span>
                {{item.context}}</a></li>
            <!-- <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-29</span>
                让文明之光照亮中华民族复兴之路</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-27</span>
                美丽的草原我的家——沿着总书记的足迹之内...</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-27</span>
                在新起点上为党和人民再立新功——习近平总...</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-26</span>
                习近平会见全国公安系统英雄模范立功集体表...</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-25</span>
                国务院召开全国稳住经济大盘电视电话会议</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-22</span>
                风暖三晋处处新——沿着总书记的足迹之山西...</a></li>
            <li><a href=""><span style="font-size: 18px; color: #999999;">2022-05-21</span>
                国务院办公厅颁发《新污染物治理行动方案》</a></li> -->
          </ul>
        </div>
      </div>
      <div class="photo_1"></div>
      <div class="fileera">
        <div class="dangjian">
          <div class="dangjiantop">
            <a href="" class="dw">党建文件</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_1">
            <li><a href="">习近平在中共中央政治局第三十九次集体学习...</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记的足迹之内...</a></li>
            <li><a href="">国务院办公厅颁发《新污染物治理行动方案》</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
          </ul>
        </div>
        <div class="shidai">
          <div class="dangjiantop">
            <a href="" class="dw">时代先锋</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <div class="ren"></div>
        </div>
      </div>
      <div class="workedu">
        <div class="dangjian">
          <div class="dangjiantop">
            <a href="" class="dw">干部工作</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_1">
            <li><a href="">习近平在中共中央政治局第三十九次集体学习...</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记的足迹之内...</a></li>
            <li><a href="">国务院办公厅颁发《新污染物治理行动方案》</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
          </ul>
        </div>
        <div class="shidai">
          <div class="dangjiantop">
            <a href="" class="dw">党员教育</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_1">
            <li><a href="">习近平在中共中央政治局第三十九次集体学习...</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记的足迹之内...</a></li>
            <li><a href="">国务院办公厅颁发《新污染物治理行动方案》</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
          </ul>
        </div>
      </div>
      <div class="photo_2"></div>
      <div class="information">
        <div class="dangzhi">
          <div class="dangzhitop">
            <a href="" class="dw">党的知识</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_2">
            <li><a href="">关于加强党建工作决定</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记...</a></li>
          </ul>
        </div>
        <div class="tashan">
          <div class="dangzhitop">
            <a href="" class="dw">他山之石</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_2">
            <li><a href="">关于加强党建工作决定</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记...</a></li>
          </ul>
        </div>
        <div class="banshi">
          <div class="dangzhitop">
            <a href="" class="dw">办事指南</a>
            <a href="" class="line"></a>
            <a href="" class="tu">>></a>
          </div>
          <ul class="list_2">
            <li><a href="">关于加强党建工作决定</a></li>
            <li><a href="">让文明之光照亮中华民族复兴之路</a></li>
            <li><a href="">美丽的草原我的家——沿着总书记...</a></li>
          </ul>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">

   import { reactive, watch } from 'vue'
   import { getMessage } from './../api/artile' 
   interface IndexData {
     boardMsg?:Message;
     newsList : Message[];
     newSelect :"d-new"
   }

   const viewModel = reactive<IndexData>({
       boardMsg : {},
       newsList:[],
      newSelect:"d-new"
   })
   
   function board(){
      getMessage(0).then(res => {
          viewModel.boardMsg = res[0]|| null;
      }); 
   }

    function newList(type:number){
        getMessage(type).then(res => {
            viewModel.newsList =res;
        }); 
    }

   board();
   newList(2);
</script>
